<template>
  <div class="user-tag-anomaly" v-if="currentMessage">{{ currentMessage }}</div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    props: {
        temperature: [String, Number],
        bloodpressure: [String, Number],
        bloodoxygen: [String, Number],
        heartbeat: [String, Number],
    },
    data () {
        return {
            index: 0,
            messageList: [
                {
                    id: 'temperature',
                    text: '',
                    isShow: false
                },
                {
                    id: 'bloodpressure',
                    text: '',
                    isShow: false
                },
                {
                    id: 'bloodoxygen',
                    text: '',
                    isShow: false
                },
                {
                    id: 'heartbeat',
                    text: '',
                    isShow: false
                }
            ],
            timer: null
        }
    },
    computed: {
        ...mapGetters(['ecgConfig']),
        validList () {
            return this.messageList.filter(item => item.isShow)
        },
        currentMessage () {
            const message = this.validList[this.index] || {}
            return message.text || ''
        }
    },
    watch: {
        // 体温
        temperature: {
            immediate: true,
            handler: function (value) {
                const currentConfig = this.ecgConfig['temperature']
                const currentMessage = this.messageList.find(item => item.id === 'temperature')
                currentMessage.isShow = false
                if (!value) return
                if (value > currentConfig.max) {
                    currentMessage.isShow = true
                    currentMessage.text = '体温过高'
                }
                if (value < currentConfig.min) {
                    currentMessage.isShow = true
                    currentMessage.text = '体温过低'
                }
            }
        },
        // 血压
        bloodpressure: {
            immediate: true,
            handler: function (value) {
                const [systolicPressure, diastolicPressure] = value.split('/')

                const currentSystolicPressureConfig = this.ecgConfig['systolicPressure']
                const currentDiastolicPressureConfig = this.ecgConfig['diastolicPressure']
                const currentMessage = this.messageList.find(item => item.id === 'bloodpressure')
                currentMessage.isShow = false
                if (!value) return
                if (systolicPressure > currentSystolicPressureConfig.max || diastolicPressure > currentDiastolicPressureConfig.max) {
                    currentMessage.isShow = true
                    currentMessage.text = '血压过高'
                }
                if (systolicPressure < currentSystolicPressureConfig.min || diastolicPressure < currentDiastolicPressureConfig.min) {
                    currentMessage.isShow = true
                    currentMessage.text = '血压过低'
                }
            }
        },
        // 血氧
        bloodoxygen: {
            immediate: true,
            handler: function (value) {
                const currentConfig = this.ecgConfig['bloodoxygen']
                const currentMessage = this.messageList.find(item => item.id === 'bloodoxygen')
                currentMessage.isShow = false
                if (!value) return
                if (value > currentConfig.max) {
                    currentMessage.isShow = true
                    currentMessage.text = '血氧过高'
                }
                if (value < currentConfig.min) {
                    currentMessage.isShow = true
                    currentMessage.text = '血氧过低'
                }
            }
        },
        // 心率
        heartbeat: {
            immediate: true,
            handler: function (value) {
                const currentConfig = this.ecgConfig['heartbeat']
                const currentMessage = this.messageList.find(item => item.id === 'heartbeat')
                currentMessage.isShow = false
                if (!value) return
                if (value > currentConfig.max) {
                    currentMessage.isShow = true
                    currentMessage.text = '心率过高'
                }
                if (value < currentConfig.min) {
                    currentMessage.isShow = true
                    currentMessage.text = '心率过低'
                }
            }
        },
    },
    created () {
        this.timer = setInterval(() => {
            this.index++
            if (this.index >= this.validList.length) {
                this.index = 0
            }
        }, 3000)
    },
    beforeDestroy () {
        clearInterval(this.timer)
    }
}
</script>

<style>
.user-tag-anomaly {
    height: 27px;
    background: rgba(191, 20, 20, 0.29);
    border-radius: 4px;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    padding: 0 16px;
    color: #BF1414;
    text-align: center;
}
</style>